<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    {{name}}
    <button @click="ajaxBtn()">点击测试</button>

    <div v-for="a in listData">
        {{a.id}}-{{a.name}}
    </div>
</div>


</body>
<script src="jss/vue.js"></script>
<!--引入js-->
<script src="jss/axios-0.18.0.js"></script>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'测试',
                listData:[]
            }
        },
        methods:{
            ajaxBtn(){
                //发送请求

                //完整写法
                axios({
                    method:'get',  //请求的方式
                    url:'http://localhost/books' //发送请求到哪个地方
                    //data:数据（js对象）  //只有post put 有参数 请求体
                }).then(resp => {
                    //成功的代码
                    console.log(resp.data)
                    this.listData=resp.data;
                }).catch(error => {
                    //失败的代码
                });

                //简写 get
                axios.get("路径/参数").then(function () {

                })

                axios.post("路径","请求体参数").then();
                //axios.delete()  axios.put()


            }
        }
    });
</script>
</html>